Reduce provider update pill rerenders#2802
Draft
cursor[bot] wants to merge 2 commits into
Draft
Conversation
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
github-actions
Bot
added
size:L
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Changed
SidebarProviderUpdatePillso the initial provider-status cutoff is kept in a ref instead of mirrored through state/effect.pendingView, dismiss-after-exit key) into refs inside a named display hook so those values do not schedule renders themselves.Why
react-doctorflagged this component for derived state and handler-only state that could cause avoidable rerenders. After the change, the targeted component diagnostics dropped from 11 to 6, including removal of the handler-only state warnings and thevisibleAfterIsoderived-state warning.React Scan recordings were captured with a temporary Vite harness and the React Scan script enabled:
/workspace/artifacts/react-scan/sidebar-provider-update-before.webm/workspace/artifacts/react-scan/sidebar-provider-update-after.webmUI Changes
No intended visual changes. The before/after videos above exercise the provider update pill loading-to-success transition with React Scan enabled.
Checklist
Verification:
bun fmtbun lintbun typecheckbunx react-doctor --full --no-score --json apps/webNote
Reduce rerenders in
SidebarProviderUpdatePillby extracting hooksRefactors SidebarProviderUpdatePill.tsx to move stateful logic into three dedicated hooks, replacing component state with refs where possible to avoid unnecessary rerenders.
useProviderUpdateVisibleAfterIsocaptures the initialvisibleAftertimestamp in a ref so it stays stable across rendersuseDisplayedProviderUpdatePillmanages view transition and exit logic using refs for pending state instead of component stateuseProviderUpdateAutoDismissencapsulates the auto-dismiss timeout, replacing an inline effectMacroscope summarized 8b2adcc. (Automatic summaries will resume when PR exits draft mode or review begins).